<template>
	<custom-nav :showBackArrow="true" title="发布动态"></custom-nav>
	<view class="page-addPost" :style="pagePaddingTop">
		<u-toast ref="uToast"></u-toast>
		<view class="post_content">
			<u--textarea placeholderClass="post_textarea" v-model="postContent" placeholder="说点什么吧......" :maxlength="-1"></u--textarea>
		</view>
		<view class="image_upload_title">
			<view>图片上传</view>
			<view class="num">{{ imgList.length }}/{{ maxImg }}</view>
		</view>
		<u-upload :fileList="imgList" @afterRead="afterRead" @delete="deletePic" name="upload" multiple
			:maxCount="maxImg" :previewFullImage="true" width="154" height="154">
			<view class="upload_img_box">
				<image style="width: 54rpx;height: 54rpx;" src="/static/post_imgAdd.png" mode="aspectFit"></image>
			</view>
		</u-upload>
		<view class="container-bottom">
			<view :class="postContent.trim().length === 0 ? 'btn_disabled' : ''" class="btn" @tap="addPost">发布</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		getNavHeightTop
	} from "@/stores/navStore.js"
	import CustomNav from "@/components/custom-nav/index.vue"
	import CustomModal from "@/components/custom-modal/index.vue"
	import {
		useUser
	} from "@/hooks/useUser.js"
	import {
		middleAPI
	} from "@/http/apis/middleAPI.js"
	import {
		uploadAPI
	} from "@/http/uploadFile"
	import Base64 from "@/libs/js-base64/index.js"
	import {
		showToast
	} from "../../utils/frameApi";

	const userStore = useUser();
	let navHeightInfo = getNavHeightTop();
	const pagePaddingTop = ref({
		"paddingTop": navHeightInfo.navTotalHeight + 'px'
	})
	let userInfo = ref(null)

	const postContent = ref('')
	const imgList = ref([])
	const maxImg = ref(6)
	const btnLoading = ref(false)

	const confirmCancellation = (res) => {
		if (res) {
			uni.clearStorage()
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
	}

	const industryId = ref(""); // 话题ID
	const industryName = ref(""); // 话题名称
	onLoad((options) => {
		industryId.value = options?.id || "";
		industryName.value = options.name ? decodeURIComponent(options.name) : '';
		if (!industryId.value) {
			uni.navigateBack();
		}
		// console.log(options)

		userStore.getUserInfo().then(async res => {
			userInfo.value = res?.public_user_info || {};
		}, err => {
			console.log(err)
		})
	})

	async function afterRead(event) {
		// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file)
		let fileListLen = imgList.value.length
		lists.map((item) => {
			imgList.value.push({
				...item,
				status: 'uploading',
				message: '上传中'
			})
		})
		for (let i = 0; i < lists.length; i++) {
			console.log(lists[i].url)
			const result = await uploadAPI(lists[i].url).catch((err) => {
				console.log(err, ">>>上传失败")
			})
			let item = imgList.value[fileListLen]
			imgList.value.splice(fileListLen, 1, Object.assign(item, {
				status: 'success',
				message: '',
				url: result
			}))
			fileListLen++
			// console.log(imgList.value)
		}
	}

	function deletePic(event) {
		imgList.value.splice(event.index, 1)
	}

	async function addPost() {
		if(postContent.value.trim().length === 0) {
			return;
		}
		
		let timestamp = new Date().getTime();
		const urls = imgList.value.map(item => item.url).join('-_-')

		let queryData = {
			invoke_method: "public_insert_or_update_middle_table",
			pre_db_para_middle_table_name: "public_middle_table_lite_mod_forum_bbs",
			type_middle_app: 62001,
			type_inner_app: 1001,
			is_online: 0,
			id_public_user_info: userInfo.value.id_public_user_info,
			mid_table_remark_001: industryName.value,
			mid_table_remark_003: Base64.encode(postContent.value), // 帖子正文base64转码
			mid_table_remark_005: urls, // 帖子图片
			mid_table_remark_006: industryId.value,
			mid_table_remark_007: userInfo.value.nick_name,
			mid_table_remark_008: userInfo.value.user_phone,
			mid_table_remark_009: userInfo.value.weichat_img,
			mid_table_remark_040: uni.$u.date(timestamp, 'yyyymmdd'),
			mid_table_remark_041: uni.$u.date(timestamp, 'yyyymm'),
			mid_table_remark_042: uni.$u.date(timestamp, 'yyyy'),
		}

		uni.showLoading({
			title: '正在发布'
		})

		let response = await middleAPI(queryData).catch((err) => {
			uni.hideLoading()
		})
		if (response) {
			uni.showToast({
				icon: 'success',
				title: '发布成功',
				duration: 2000,
				success: (res) => {
					uni.navigateBack({
						delta: 1
					})
				},
			})
		}
	}
</script>

<style lang="less" scoped>
	view {
		box-sizing: border-box;
	}

	.page-addPost {
		position: relative;
		width: 100%;
		min-height: 100vh;
		background-color: #182836;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		padding: 32rpx;
		box-sizing: border-box;

		/deep/ .u-textarea {
			height: 100%;
			background: transparent;
			padding: 0;
		}

		/deep/ .uni-textarea-placeholder {
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
		
		/deep/ .u-textarea__field {
			height: 100% !important;
			color: #FFFFFF;
		}
		
		/deep/ .u-upload__wrap__preview__image {
			border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		}
		
		/deep/ .u-upload__deletable {
			top: 7rpx;
			right: 7rpx;
			width: 28rpx;
			height: 28rpx;
			background: url('@/static/post/post_delete.png');
			border-bottom-left-radius: 0;
			background-size: contain;
		}
		
		/deep/ .u-upload__deletable__icon {
			display: none;
		}
		
		/deep/ .u-upload__success {
			display: none;
		}
		

		.post_content {
			margin-top: 32rpx;
			height: 350rpx;
			background: #213343;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			opacity: 1;
			border: 1rpx solid rgba(255, 255, 255, 0.2);
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			padding: 44rpx 32rpx;
		}
		
		.post_textarea {
			font-size: 28rpx;
			color: #6E7A84 !important;
		}
		
		.image_upload_title {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 32rpx 0;

			.num {
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #D5D5D5;
			}
		}
		
		.upload_img_box {
			width: 154rpx;
			height: 154rpx;
			background: #213343;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			opacity: 1;
			border: 1rpx solid rgba(255,255,255,0.2);
		}

		.container-bottom {
			position: fixed;
			left: 0;
			right: 0;
			height: 184rpx;
			background: #182836;
			box-shadow: 0px -2rpx 10rpx 0px rgba(255, 255, 255, 0.08);
			border-radius: 56rpx 56rpx 0px 0px;
			box-sizing: border-box;
			bottom: -1px;

			.btn {
				position: relative;
				width: 686rpx;
				height: 120rpx;
				background: linear-gradient(180deg, #00FFF6 0%, #28C0FF 100%);
				border-radius: 60rpx;
				display: flex;
				display: -webkit-flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				margin: 24rpx auto 0;
				line-height: 36rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
			
			.btn_disabled {
				opacity: 0.5;
			}
		}
	}
</style>